<template>
    <x-page class="page-my-qr-code" title="推广二维码" fixed-main-content>
        <template slot="main">
            <div class="background"></div>
            <div class="front">
                <div class="x-tip">长按保存至手机相册</div>
                <div class="share-content">
                    <img class="share-img" ref="qrCode">
                    <div class="share-tip">
                        这是属于你的专属分享码
                    </div>
                    <div class="share-tip">
                        将二维码分享出去开始推广
                    </div>
                </div>
                <div class="share-title">
                    分享链接
                </div>
                <div class="share-url">
                    {{this.url}}
                </div>
            </div>

        </template>
    </x-page>
</template>

<script>
import QrCode from 'QrCode';
import Auth from 'src/api/auth';
import XPage from '../components/XPage';

export default {
    components: { XPage },
    data() {
        return {
            url: process.env.VUE_APP_XB + '#/m/register?ic=' + Auth.getUserId()
        };
    },
    mounted() {
        this.generate();
    },
    methods: {
        generate() {
            let image = this.$refs['qrCode'];
            QrCode.toCanvas(this.url, {
                errorCorrectionLevel: 'H',
                margin: 1,
                scale: 8
            }, (e, canvas) => {
                if (e) {
                    alert(e);
                }
                image.src = canvas.toDataURL('image/png');
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.page-my-qr-code {
    position: relative;
    .background {
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height: 4.96rem;
        background-color: #0071FF;
    }
    .front {
        position: absolute;
        top:0;
        left:0;
        padding-top: 0.52rem;
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .x-tip {
            color: white;
        }
        .share-content {
            margin-top: 0.4rem;
            padding: 0.6rem 0 0.74rem;
            width:4.4rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border-radius: 0.24rem;
            box-shadow: 0.04rem 0.04rem 0.08rem 0 rgba(225, 225, 225, 1);
            border: 0.02px solid rgba(240, 238, 238, 1);
            img {
                margin-bottom: 0.3rem;
                width: 3rem;
            }
            .share-tip {
                color:#AAAAAA;
            }
        }
        .share-title {
            margin-top: 0.7rem;
            color:#AAAAAA;
        }
        .share-url {
            color: #0071FF;
        }
    }

}
</style>